Categoria: Programacion Tema: Css Titulo: Herencia de propiedades de estilo en CSS
Fecha del Tema: 2013-02-03 17:09:49 Herencia de propiedades de estilo Ahora veremos que el conjunto de marcas HTML forman en sí un árbol que ensu raíz podemos identificar la marca body del cual se desprenden otrasmarcas contenidas en esta sección, como podrían ser las marcash1,h2,h3,h4,h5,h6,p,div luego estas en su interior contienen otras marcasHTML como podrían ser em,b,i,pre etc. Ahora veremos con ejemplos que hay muchos estilos que se heredan (todos losvistos hasta el momento se heredan), es decir si definimos la propiedadcolor para la marca h1, luego si dicha marca incorpora un texto con lamarca b (bold) en su interior, la propiedad color de la marca b tendrá elmismo valor que la propiedad h1 (es decir la marca b hereda las propiedadesde la marca h1). Con un ejemplo veremos el resultado de la herencia de propiedades entre lasmarchas HTML: <?php //esto no va <html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff; font-family:verdana; } </style> </head> <body> <h1>Este es un título de nivel 1 y con la marca `em` la palabra: <em>Hola</em></h1> <p>Todo este párrafo debe ser de color azul ya que lo hereda de la marca body.</p> <a href="pagina2.html">Siguiente ejemplo</a> </body> </html> En este ejemplo hemos definido la siguiente regla para la marca body: body { color:#0000ff; font-family:verdana; } ?>//esto no va Inicializamos la propiedad color con el valor de azul y la fuente de tipoverdana. Con esto todas las marcas contenidas en el body que no redefinanestas dos propiedades recibirán los valores aquí definidos. En esteejemplo la cabecera de primer nivel es decir h1, el párrafo y elhipervínculo tienen como color el azul y la fuente es de tipo verdana. Ahora bien en muchas situaciones podemos redefinir propiedades para marcascontenidas, veamos como podemos hacer que el texto contenido en las marcasem y p aparezcan de color distinto: <?php //esto no va <html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff; font-family:verdana; } em { color:#008800; } p{ color:#999999; } </style> </head> <body> </body> <h1>Este es un título de nivel 1 y con la marca `em` la palabra: <em>Hola</em></h1> <p>Todo este párrafo debe ser de color gris ya que lo redefine la marca p y no lo hereda de la marca body.</p> </html> ?>//esto no va Ahora hemos definido tres reglas, la primera igual que el problemaanterior, define la propiedad color en azul y la fuente de tipo verdanapara la marca body: <?php //esto no va body { color:#0000ff; font-family:verdana; } ?>//esto no va La segunda regla define la propiedad color en verde para la marca em, conesto no heredará el color azul de la marca body (que es la marca padre): <?php //esto no va em { color:#008800; } Algo similar hacemos con la marca p para indicar que sea de color gris: p{ color:#999999; } ?>//esto no va Pero podemos ver que todas las marcas heredan la fuente verdana ya queninguna marca la sobreescribe.
Herencia de propiedades de estilo Ahora veremos que el conjunto de marcas HTML forman en sí un árbol que ensu raíz podemos identificar la marca body del cual se desprenden otrasmarcas contenidas en esta sección, como podrían ser las marcash1,h2,h3,h4,h5,h6,p,div luego estas en su interior contienen otras marcasHTML como podrían ser em,b,i,pre etc. Ahora veremos con ejemplos que hay muchos estilos que se heredan (todos losvistos hasta el momento se heredan), es decir si definimos la propiedadcolor para la marca h1, luego si dicha marca incorpora un texto con lamarca b (bold) en su interior, la propiedad color de la marca b tendrá elmismo valor que la propiedad h1 (es decir la marca b hereda las propiedadesde la marca h1). Con un ejemplo veremos el resultado de la herencia de propiedades entre lasmarchas HTML: <?php //esto no va <html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff; font-family:verdana; } </style> </head> <body> <h1>Este es un título de nivel 1 y con la marca `em` la palabra: <em>Hola</em></h1> <p>Todo este párrafo debe ser de color azul ya que lo hereda de la marca body.</p> <a href="pagina2.html">Siguiente ejemplo</a> </body> </html> En este ejemplo hemos definido la siguiente regla para la marca body: body { color:#0000ff; font-family:verdana; } ?>//esto no va Inicializamos la propiedad color con el valor de azul y la fuente de tipoverdana. Con esto todas las marcas contenidas en el body que no redefinanestas dos propiedades recibirán los valores aquí definidos. En esteejemplo la cabecera de primer nivel es decir h1, el párrafo y elhipervínculo tienen como color el azul y la fuente es de tipo verdana. Ahora bien en muchas situaciones podemos redefinir propiedades para marcascontenidas, veamos como podemos hacer que el texto contenido en las marcasem y p aparezcan de color distinto: <?php //esto no va <html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff; font-family:verdana; } em { color:#008800; } p{ color:#999999; } </style> </head> <body> </body> <h1>Este es un título de nivel 1 y con la marca `em` la palabra: <em>Hola</em></h1> <p>Todo este párrafo debe ser de color gris ya que lo redefine la marca p y no lo hereda de la marca body.</p> </html> ?>//esto no va Ahora hemos definido tres reglas, la primera igual que el problemaanterior, define la propiedad color en azul y la fuente de tipo verdanapara la marca body: <?php //esto no va body { color:#0000ff; font-family:verdana; } ?>//esto no va La segunda regla define la propiedad color en verde para la marca em, conesto no heredará el color azul de la marca body (que es la marca padre): <?php //esto no va em { color:#008800; } Algo similar hacemos con la marca p para indicar que sea de color gris: p{ color:#999999; } ?>//esto no va Pero podemos ver que todas las marcas heredan la fuente verdana ya queninguna marca la sobreescribe.
Css